<template>
  <view class="page-container">
    <S1Header title="打印二维码配置" :on-back="goBack" />

    <view class="content-wrapper">
      <view class="form-list">
        <!-- 设置地址 -->
        <view class="form-item column">
          <text class="item-label">
            设置地址
          </text>
          <view class="input-wrapper">
            <input
              v-model="formData.shoukuan_link"
              class="input-field"
              placeholder="请输入收款地址"
              @blur="saveConfig"
            >
            <button class="scan-btn" @click="handleScan">
              扫描
            </button>
          </view>
        </view>

        <!-- 二维码底部文本 -->
        <view class="form-item column">
          <text class="item-label">
            二维码底部文本
          </text>
          <input
            v-model="formData.shoukuan_link_text"
            class="input-field"
            placeholder="请输入二维码底部文本"
            @blur="saveConfig"
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import S1Header from '@/components/S1Header.vue';
import { post } from '@/utils/request';

interface FormData {
  shoukuan_link: string;
  shoukuan_link_text: string;
}

defineOptions({ name: 'QrCodeConfig' });

const formData = ref<FormData>({
  shoukuan_link: '',
  shoukuan_link_text: '',
});

const goBack = () => {
  uni.navigateBack();
};

// 获取二维码配置
const getQrCodeConfig = () => {
  try {
    const printerInfo = uni.getStorageSync('printer_info');
    if (printerInfo) {
      const info = JSON.parse(printerInfo);
      formData.value = {
        shoukuan_link: info.shoukuan_link || '',
        shoukuan_link_text: info.shoukuan_link_text || '',
      };
    }
  }
  catch (error) {
    console.error('获取二维码配置失败:', error);
  }
};

// 保存配置
const saveConfig = async () => {
  try {
    const res: any = await post('/syapi/config/saveShoukuanLink', {
      data: {
        shoukuan_link: formData.value.shoukuan_link,
        shoukuan_link_text: formData.value.shoukuan_link_text,
      },
    });

    if (res.code === 200) {
      uni.setStorageSync('printer_info', JSON.stringify(res.data));
      uni.showToast({
        title: '保存成功',
        icon: 'success',
      });
    }
    else {
      uni.showToast({
        title: res.msg || '保存失败',
        icon: 'none',
      });
    }
  }
  catch (error) {
    console.error('保存失败:', error);
    uni.showToast({
      title: '保存失败',
      icon: 'none',
    });
  }
};

// 扫描二维码
const handleScan = () => {
  uni.scanCode({
    success: (res) => {
      formData.value.shoukuan_link = res.result;
      saveConfig();
    },
    fail: (err) => {
      console.error('扫描失败:', err);
      uni.showToast({
        title: '扫描失败',
        icon: 'none',
      });
    },
  });
};

onMounted(() => {
  getQrCodeConfig();
});
</script>

<style scoped lang="scss">
.page-container {
  min-height: 100vh;
  background-color: #f8f8f8;
}

.content-wrapper {
  padding: 20rpx 32rpx;
}

.form-list {
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
}

.form-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 40rpx;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);

  &:last-child {
    border-bottom: none;
  }

  &.column {
    flex-direction: column;
    align-items: flex-start;
  }
}

.item-label {
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 20rpx;
}

.input-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 20rpx;
}

.input-field {
  flex: 1;
  height: 80rpx;
  width: 92%;
  padding: 0 24rpx;
  font-size: 28rpx;
  border: 1rpx solid #e5e5e5;
  border-radius: 8rpx;
  background-color: #f8f8f8;
}

.scan-btn {
  flex-shrink: 0;
  height: 80rpx;
  padding: 0 32rpx;
  font-size: 28rpx;
  color: #fff;
  background-color: #4ca75b;
  border: none;
  border-radius: 8rpx;
  line-height: 80rpx;
}
</style>
